<script>
import {cancelOrder, downloadMedicalCertificate, findPatientOrderList, serviceEvaluation} from "@/api/order";

export default {
  name: "RegistrationOrder",
  data() {
    return {
      tableData: [],
      loading: true,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      form:{
        rate:null,
        feedback:null,
        orderNo:null
      },
      dialogFormVisible:false,
      orderDate: null,
      userId: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).userId : null,
      statusList: [{name: '已叫号', value: '2'}, {name: '已支付', value: '1'}, {
        name: '待支付',
        value: '0'
      }, {name: '已取消', value: '-1'}],
      status: null
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        userId: this.userId,
        orderDate: this.orderDate,
        status: this.status
      };
      findPatientOrderList(params).then(res => {
        this.tableData = res.data.records;
        this.loading = false;
        console.log(this.tableData)
        this.total = res.data.total;
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.load();
    },
    cancelOrder(orderNo) {
     cancelOrder(orderNo).then(res=>{
       if(res.code===200){
         this.load();
         this.$message({
           message: '订单已取消',
           type: 'success',
           center: true
         });
       }else{
         this.$message({
           message: res.msg,
           type: 'error',
           center: true
         });
       }
     })
    },
    downloadMedicalCertificate(certificateNo) {
      downloadMedicalCertificate(certificateNo).then(res => {
        const blob = new Blob([res.data], {type: "application/octet-stream;charset=utf-8"})
        const downloadElement = document.createElement("a");
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = decodeURI(
            res.headers["content-disposition"].split("filename=")[1]);
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      })
    },
    reset() {
      this.currentPage = 1;
      this.orderDate = null;
      this.status = null;
      this.load();
    },
    openDialog(){
      this.form={
        rate:null,
        feedback:null,
        orderNo:null
      }
      this.dialogFormVisible=true;
    },
    serviceEvaluation(orderNo){
      this.form.orderNo=orderNo;
      serviceEvaluation(this.form).then(res=>{
        if(res.code===200){
          this.dialogFormVisible=false;
          this.form={
            rate:null,
            feedback:null,
            orderNo:null
          }
          this.load();
          this.$message({
            message: '我们已收到您的反馈，感谢您的参与',
            type: 'success',
            center: true
          });
        }else{
          this.$message({
            message: res.msg,
            type: 'error',
            center: true
          });
        }
      })
    }
  }
}
</script>
<template>
  <div>
    <div style="margin-bottom: 35px">
      <el-date-picker type="date" v-model="orderDate" format="yyyy年MM月dd日" value-format="yyyy-MM-dd"
                      placeholder="请选择下单日期" class="ml-5" clearable></el-date-picker>
      <el-select v-model="status" class="ml-5" placeholder="请选择订单状态" clearable>
        <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
      <el-button type="warning" style="margin-left: 5px" @click="reset">重置</el-button>
    </div>
    <div>
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          v-loading="loading"
          element-loading-text="拼命加载中">
        <el-table-column prop="orderNo" label="订单号" align="center" :show-overflow-tooltip=true></el-table-column>
        <el-table-column label="就诊时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.appointmentScheduler.workDate }}&ensp;{{ scope.row.appointmentTime }}
          </template>
        </el-table-column>
        <el-table-column prop="appointmentScheduler.doctor.department.name" label="就诊科室"
                         align="center"></el-table-column>
        <el-table-column prop="appointmentScheduler.doctor.user.userName" label="看诊医生"
                         align="center"></el-table-column>
        <el-table-column prop="amount" label="看诊费用" align="center" width="80px"></el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==='-1'">已取消</span>
            <span v-else-if="scope.row.status==='0'">待支付</span>
            <span v-else-if="scope.row.status==='1'">已支付</span>
            <span v-else>已叫号</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <el-button type="success" v-if="scope.row.status==='0'">支付</el-button>
            <el-button type="warning" v-if="scope.row.status==='0' || scope.row.status==='1' "
                       @click="cancelOrder(scope.row.orderNo)">取消订单
            </el-button>
            <el-button type="primary" v-if="scope.row.status==='2' && scope.row.certificateNo !=null"
                       @click=" downloadMedicalCertificate(scope.row.certificateNo)">下载诊断书
            </el-button>
            <el-button type="info" v-if="scope.row.status==='2' && scope.row.rate ==null"
                       @click="openDialog">评价
            </el-button>
            <el-dialog title="服务评价" :visible.sync="dialogFormVisible" width="450px">
              <el-form :model="form">
             <el-form-item label="评分" label-width="120px">
               <el-rate
                   v-model="form.rate"
                   show-text
                   :texts="['极差','失望','一般','满意','非常满意']">
               </el-rate>
             </el-form-item>
             <el-form-item label="意见反馈" label-width="120px">
               <el-input
                   type="textarea"
                   :rows="3"
                   placeholder="请输入您的意见反馈"
                   v-model="form.feedback">
               </el-input>
             </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="serviceEvaluation(scope.row.orderNo)">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding:10px 0px">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>